<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css" />
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/swiper-bundle.min.css" />
    <link rel="stylesheet" href="./css/hotChat.css" />
  </head>
  <body>
    <script src="./js/rem.js"></script>
    <script src="./js/swiper-bundle.min.js"></script>

    <header>
      <div class="nav">
        <i class="iconfont icon-hot-fill"></i>
        <a href="###">广场</a>
        <a href="###">动态</a>
        <a href="###">热门圈儿</a>
      </div>
      <i class="iconfont icon-search"></i>
    </header>
    <main>
      <div class="hot-chat">
        <div class="title">
          <h4>话题热榜</h4>
          <p>更多话题 ></p>
        </div>
        
        <ul class="text_t"> 
          <!-- <li>
            <p><span>1</span> 这些文艺作品烟火气满满</p>
            <p><span>2</span> 2022年度名场面</p>
            <p><span>3</span> 治愈系影剧天花板</p>
            <p><span>4</span> 看别人谈恋爱有多有意思</p>
            <p><span>5</span> 好朋友可以做好同事吗</p>
          </li>  -->
        </ul>
      </div>
      <ul class="all-chat">
        <li>
          <div class="avtar">
            <i class="iconfont icon-bussiness-man-fill" ></i>
            <span>卡卡罗特</span>
          </div>
          <p>
          贝吉塔永远都是第二
          </p>
        <div class="img-wrap">
          <img src="./images/hotChat/longzhu.jpg" alt="">
        </div>
        <div class="name"></div>
        <div class="comment">
          <p><span>比克</span>：英雄所见略同</p>
        </div>
        <div class="all-comment">
          <span><i class="iconfont icon-atm" ></i>我来评论下</span>
          <div class="icons">
            <i class="iconfont icon-good-fill"></i>
            <i class="iconfont icon-favorites-fill"></i>
            <i class="iconfont icon-atm-fill"></i>
            <i class="iconfont icon-salescenter-fill"></i>
          </div>
        </div>
        </li>
        <li>
          <div class="avtar">
            <i class="iconfont icon-bussiness-man-fill" ></i>
            <span>小艺当家</span>
          </div>
          <p>
          贝吉塔永远都是第二
          </p>
        <div class="img-wrap">
          <img src="./images/hotChat/10.jpg" alt="">
          <img src="./images/hotChat/11.jpg" alt="">
        </div>
        <div class="name"></div>
        <div class="comment">
          <p><span>比克</span>：太帅了吧</p>
        </div>
        <div class="all-comment">
          <span><i class="iconfont icon-atm" ></i>我来评论下</span>
          <div class="icons">
            <i class="iconfont icon-good-fill"></i>
            <i class="iconfont icon-favorites-fill"></i>
            <i class="iconfont icon-atm-fill"></i>
            <i class="iconfont icon-salescenter-fill"></i>
          </div>
        </div>
        </li>
      </ul>
    </main>

    <!-- 底部导航 -->
    <footer>
      <a href="./index.html">
        <img src="./images/tabbar/2.png" alt="" />
        <p>首页</p>
      </a>
      <a href="./vip.html">
        <img src="./images/tabbar/4.png" alt="" />
        <p>vip</p>
      </a>
      <a href="./hotChat.html">
        <img src="./images/tabbar/1-1.png" alt="" />
        <p>热议</p>
      </a>
      <a href="./my.html">
        <img src="./images/tabbar/3.png" alt="" />
        <p>我的</p>
      </a>
    </footer>
    <script>
        var xhr = new XMLHttpRequest();
      xhr.open("get", "json/text_t.json", true);
      xhr.send();
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
          var data = JSON.parse(xhr.responseText);
          // 2.渲染数据
          var str = "";
          for (var i = 0; i < data.length; i++) {
            str += `<ul class="text_t">
          <li>
            <p><span>${data[i].num1}</span>${data[i].text1}</p>
            <p><span>${data[i].num2}</span>${data[i].text2}</p>
            <p><span>${data[i].num3}</span>${data[i].text3}</p>
            <p><span>${data[i].num4}</span>${data[i].text4}</p>
            <p><span>${data[i].num5}</span>${data[i].text5}</p>
          </li>
        </ul>`;
          }
          document.querySelector(".text_t").innerHTML += str;
        }
      };
    </script>
  </body>
</html>
